import { useCallback, useEffect, useState } from "react";
import "./App.css";
import MyHeader from "./components/MyHeader/MyHeader.js";
import Myinput from "./components/MyInput/index.js";
import TodoList from "./components/TodoList/index.js";
import CheckModal from "./components/MyModal/CheckModal/index.js";
import EddModal from "./components/MyModal/EddModal/index.js";
function App() {
  const [isShow, setIsShow] = useState(false);
  const [isShowModel, setIsshowmodel] = useState(false);
  const [todoLists, setTodoLists] = useState([
    {
      id: 1744937236416,
      content: "dd",
      completed: false,
    },
    {
      id: 1743947236416,
      content: "dsds",
      completed: true,
    },
    {
      id: 1744943236416,
      content: "33",
      completed: false,
    },
  ]);
  const [currentData, setCurrentData] = useState({});
  const [isShowEddModal, setIsShowEddModal] = useState(false);
  // 获取本地缓存的数据
  // useEffect(()=>{
  //   const todoData=JSON.parse(localStorage.getItem('todoData') || '[]')
  //   setTodoLists(todoData)
  // },[])

  // 存储本地缓存数据
  useEffect(() => {
    // 只要todoLists发生变化将新的数据存入本地缓存
    localStorage.setItem("todoData", JSON.stringify(todoLists));
  }, [todoLists]);

  const addList = () => {
    setIsShow(!isShow);
  };
  // 添加待办事项
  const addItem = (item) => {
    console.log(item);
    const addListItem = {
      id: new Date().getTime(),
      content: item,
      completed: false,
    };
    setTodoLists((todoLists) => [...todoLists, addListItem]);
    setIsShow(false);
  };
  // 需要进行缓存避免混乱
  const openCheckModal = (id) => {
    setCurrentData(() => todoLists.filter((item) => item.id === id)[0]);
    setIsshowmodel(true);
  };
  // 打开编辑弹框
  const openEditModal = (id) => {
    // 传递id 通过id获取到当前的todoList
    setCurrentData(() => todoLists.filter((item) => item.id === id)[0]);
    // 编辑弹框展示
    setIsShowEddModal(true);
  };
  // 修改弹框的获取数据后的修改函数
  const submitEdit = (val, id) => {
    console.log(val);
    console.log(id);
    // 通过id将todoLists数据中的内容进行替换
    setTodoLists((todoLists) => 
      todoLists.map((item) => {
        if (item.id === id) {
          item = val;
        }
        return item;
      })
    )
    setIsShowEddModal(false)
  };
  const Closehanshu = useCallback(() => {
    setIsshowmodel(false);
  }, [todoLists]);

  return (
    <div className="App">
      {/* 传递弹框是否显示的isShowModel */}
      <CheckModal
        isShowModel={isShowModel}
        closeModal={Closehanshu}
        data={currentData}
      ></CheckModal>
      {/* 编辑弹框的展示 */}
      <EddModal isShowModel={isShowEddModal} data={currentData} submitEdit={submitEdit}></EddModal>
      <MyHeader title="My Header" addList={addList} />

      <Myinput isShow={isShow} addItem={addItem}></Myinput>
      <ul>
        {todoLists.map((item) => (
          // 将每一项的id传递给子组件 打开查看弹框  打开编辑弹框
          <TodoList
            key={item.id}
            todoList={item}
            openCheckModal={openCheckModal}
            openEditModal={openEditModal}
          />
        ))}
      </ul>
    </div>
  );
}

export default App;
